<template>
  <div v-loading="isLoading" class="owner-send" @scroll="handleScroll" ref="ownerRef">
    <h1 class="owner-send-title">独家放送</h1>
    <ul>
      <li
        v-for="item of ownerSendlist"
        :key="item"
        @click="selectMv(item.id)"
      >
        <OwnerSendItem :ownerSendData="item" />
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
import { getOwnerSendlist } from '@/api/recommend/index'
import OwnerSendItem from '@/components/ownerSend/index.vue'
import { useRouter } from 'vue-router'

interface OwnerSend {
  id: number;
  picUrl: string;
  name: string;
}
export default {
  name: 'index',
  components: {
    OwnerSendItem
  },
  setup () {
    const router = useRouter()
    const ownerRef = ref<Element | null>(null)
    const limit = ref<number>(60)
    const offset = ref<number>(0)
    const isLoading = ref<boolean>(false)
    const ownerSendlist = ref<OwnerSend[]>([])
    const selectMv = (id) => {
      router.push({ name: 'video', params: { id } })
    }
    const init = async () => {
      isLoading.value = true
      try {
        const data = await getOwnerSendlist({ limit: limit.value, offset: offset.value })
        ownerSendlist.value = ownerSendlist.value.concat(data)
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }
    const handleScroll = () => {
      const ownerClientHeight = ownerRef.value.clientHeight
      if (ownerRef.value.scrollHeight - ownerRef.value.scrollTop <= ownerClientHeight) {
        offset.value++
        init()
      }
    }
    onMounted(() => {
      init()
    })
    return {
      ownerRef,
      ownerSendlist,
      isLoading,
      handleScroll,
      selectMv
    }
  }
}
</script>

<style lang="scss" scoped>
.owner-send {
  padding: 30px 20px 10px 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;

  .owner-send-title {
    font-size: 20px;
    font-weight: bold;
    color: #2b2b2b;
    margin-bottom: 20px;
  }

  >ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    >li {
      flex: 0 0 32%;
      margin-bottom: 15px;
      cursor: pointer;
    }
  }
}
</style>
